<template>
  <div
    style="
      margin: 0px 20px;
      margin-top: 50px;
      box-shadow: 5px 10px 20px rgba(0, 0, 0, 0.5);
      display: flex;
      flex-direction: column;
      height: 100vh;
    "
  >
    <div class="settings-body1">
      <div class="content1">
        <div class="icon-container1">
          <img src="@\assets\imgs\系统.png" alt="系统图标" />
        </div>
        <div class="settings-title1">系统设置：</div>
      </div>
      <div class="content1">当前版本信息：优化了训练内容</div>

      <div class="version-details1">
        <div class="version-label1">版本号：</div>
        <div class="version-value1" style="color: rgb(255, 60, 0)">V2.0.8</div>
      </div>

      <div class="content1">新版本检测</div>
      <div class="content1" style="color: rgb(255, 60, 0)">手动更新</div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from "vue";
</script>

<style  scoped>
.settings-body1 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  /* grid-gap: 10px 60px; */
  border: 1px solid rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(5px);
}
.content1 {
  height: 70px;
  display: flex;
  align-items: center;
  padding: 0px 43px;
}

.icon-container1 {
  width: 40px;
  height: 40px;
  background-color: rgb(255, 60, 0);
  margin-right: 10px;
  border-radius: 50%;
  display: flex;
  justify-content1: center;
  align-items: center;
}
.icon-container1 img {
  width: 23px;
  height: 23px;
}

.version-details1 {
  height: 70px;
  display: flex;

  align-items: center;
  padding: 0px 43px;
  grid-column-start: 1;
  grid-column-end: 3;
}
</style>